<!-- 循环生成课程已经完成后面加一个分页 -->
<template>
	<div>
		<div style="height: 40px; background-color: #4c4c4c;">
			<span style="color: white;margin-left: 200px;line-height: 40px;font-size: 20px;">学</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">习</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">使</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">你</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">强</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">大！</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">加</span>
			<span style="color: white;margin-left: 70px;line-height: 40px;font-size: 20px;">油</span>
			<i class="el-icon-user" style="color: white;margin-left: 360px;"></i>
			<span style="line-height: 40px; color: white;">带与</span>
		</div>
		<!-- 
			图el-card (card中文字给链接)
			this.$router.push({path: '/recommend'})
			this.$router.push({path: '/recommend',query:{ id:'2'}})
			this.$router.push({name: '/recommend',params:{ id:'6'}}) 
		-->
		<div style="height: 600px;margin: 0px 15px;">
			<div class="head" style="height: 40px;padding:8px ; line-height: 40px;">
				<el-row>
					<el-col :span="4">
						<el-button type="primary" icon="el-icon-coffee" style="margin-left: 60px;">我的学习</el-button>
					</el-col>
					<el-col :span="1">
						<span style="font-size: 20px;">筛选:</span>
					</el-col>
					<el-col :span="7">
						<el-input v-model="className" placeholder="请输入你要筛选的课程名"></el-input>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" icon="el-icon-search" style="margin-left: 4px;">筛选</el-button>
					</el-col>
				</el-row>
			</div>
			<hr />
			<div class="container">
				<el-card class="source" v-for="item in course" :key="item.courseId">
					<img :src=item.imgUrl class="image">
					<div>
						<p style="font-size: 16px;text-align: center;	font-weight: 600;cursor: pointer;" class="title" @click="jump(item.courseId)">{{item.courseName}}</p>
						<p style="text-align: left;margin-top: 15px; display: inline-block;">教师：{{item.teacher}}</p>
						<p style="text-align: right;margin-top: 0.3125rem;display: inline-block;margin-left: 90px;">课时：{{item.num}}</p>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>
<script>
	import axios from '../../../utils/axiosutils.js';
	export default {
		name: 'studentClient',
		data() {
			return {
				className: '',
				course: [],
			};
		},
		created() {
			axios.post("/course/myCourse", resp => {
				this.course = resp.obj;
			}, {
				id: 1
			});
		},
		methods: {
			jump(courseId) {
				this.$router.push({
					name: 'mycourse',
					query: {
						courseId: courseId
					}
				})
			}
		}
	};
</script>
<style scoped>
	.source {
		display: inline-block;
		width: 300px;
		height: 300px;
		margin: 10px;
	}

	.image {
		width: 258px;
		height: 200px;
	}

	.title:hover {
		font-size: 16px;
		text-align: center;
		font-weight: 660;
		color: #00AAFF;
	}
</style>
